<template>
  <a-modal
    :title="formTile + '字段'"
    :visible="true"
    width="60%"
    :footer="null"
    @cancel="reset"
  >
    <div class="main">
           <a-card>
      <a-row
        type="flex"
        justify="start"
        align="top"
      >
        <a-col :span="24">
          <a-form
            :form="form"
            @submit="handleSubmit"
            :labelCol="formItemLayout.labelCol"
            :wrapperCol="formItemLayout.wrapperCol"
          >
            <a-form-item
              label="字段名称"
              :required="true"
            >
              <a-input
                allow-clear
                placeholder="请输入字段名称"
                :maxLength="40"
                v-decorator="[
                  `fieldName`,
                  {
                    validateTrigger: ['change', 'blur'],
                    rules: [
                      {
                        required: true,
                        whitespace: true,
                        message: '请输入字段名称'
                      }
                    ]
                  }
                ]"
              />
            </a-form-item>
            <a-form-item
              label="别名"
            >
              <a-input
                allow-clear
                placeholder="请输入别名"
                :maxLength="40"
                v-decorator="[
                  `alias`,
                 
                ]"
              />
            </a-form-item>

            <a-form-item
              label="字段"
              :required="true"
            >
              <a-input
                allow-clear
                placeholder="请输入字段"
                :maxLength="40"
                v-decorator="[
                  `field`,
                  {
                    validateTrigger: ['change', 'blur'],
                    rules: [
                      {
                        required: true,
                        whitespace: true,
                        message: '请输入字段'
                      }
                    ]
                  }
                ]"
              />
            </a-form-item>
            <a-row>
              <a-col
                :span="16"
                :offset="8"
                class="info-action"
              >
                  <a-button @click="reset">
              取消
            </a-button>
            <a-button
              :style="{ marginLeft: '8px' }"
              type="primary"
              html-type="submit"
            >
              保存
            </a-button>
              </a-col>
            </a-row>
          </a-form>
        </a-col>
      </a-row>
    </a-card>

    </div>

  </a-modal>
</template>

<script>
import { postAction } from '@/api/manage'
import { pattern } from '@api/pattern/index'
export default {
  components: {},

  props: {
    account: {
      type: Object,
      default: null,
    },
  },

  data() {
    return {
      urlKey: 'account',
      id:'',
         formItemLayout: {
        labelCol: {
          xl: { span: 5 },
          xs: { span: 5 },
          sm: { span: 6 }
        },
        wrapperCol: {
          xl: { span: 8 },
          xs: { span: 12 },
          sm: { span: 12 }
        }
      },
      patt: 'api/gateway/basemgt-op/',
      loading: true,
      form: this.$form.createForm(this),
      showTable: false,
    }
  },

  beforeCreate() {
    this.form = this.$form.createForm(this, { fieldName: 'account',field: 'account',alias: 'account' })
  },

  created() {
    const { account } = this.$props
    if (account) {
      this.formTile = '编辑'
       this.$nextTick(() => {
        this.form.setFieldsValue({ fieldName: account.fieldName, field: account.field,alias: account.alias})
      })
      this.id = account.id
    } else {
      this.formTile = '新增'
      this.showTable = true
    }
  },
  mounted() {
  },
  methods: {
    reset() {
      this.form.resetFields()
      this.$emit('close')
    },
    handleSubmit(e) {
      e.preventDefault()
      this.form.validateFields((err, values) => {
        if (!err) {
          this.submit(values)
        }
      })
    },
    submit(values) {
        var params = {
          alias:values.alias,
          field:values.field,
          fieldName:values.fieldName,
          fieldId:this.id
        }
      const api = this.showTable ? `${this.patt}field/save` : `${this.patt}field/update`
      this.$http({
        url: api,
        method: 'post',
        data: params,
      }).then((data) => {
        if (data.code == 200) {
          this.$message.success(this.showTable ? '新建帐号成功！' : '修改成功！')
          this.reset()
        } else {
          this.$message.warning(data.msg)
        }
      })
    },
  },
}
</script>

<style scoped lang="less">
.main {
  // display: flex;
}
.info-action {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  // margin-bottom: 20px;
}
.ml-20 {
  margin-left: 20px;
}
</style>
